import React, { useState, useEffect } from "react";
import { CapsuleTabs } from "antd-mobile";
import { StarOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import "../../css/zxx/Shou.css";
import axios from "axios";

function Collect() {
  const navigate = useNavigate();
  const [list, setList] = useState([]);

  useEffect(() => {
    const listDate = async () => {
      try {
        const response = await axios.get("http://localhost:3000/clear/list", {
          headers: {
            authorization: localStorage.getItem("token"),
          },
        });
        if (response.data.code === 200) {
          console.log(response.data.data);
          setList(response.data.data);
        }
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    };
    listDate();
  }, []);

  const [activeKey, setActiveKey] = useState("all"); // 胶囊选项卡默认选中项
  const tabss = [
    { key: "all", title: "全部" },
    { key: "qingjie", title: "清洁服务" },
    { key: "weixiu", title: "维修服务" },
    { key: "fenshua", title: "粉刷服务" },
    { key: "xiyi", title: "洗衣服务" },
  ];

  return (
    <div>
      <div>
        <img
          src="./返回.png"
          alt=""
          className="zx-tongtp"
          onClick={() => navigate("/tar/shou")}
        />
        <span className="zx-tong">我的收藏</span>
      </div>
      <div>
        <CapsuleTabs defaultActiveKey={activeKey} onChange={setActiveKey}>
          {tabss.map((tab) => (
            <CapsuleTabs.Tab key={tab.key} title={tab.title}></CapsuleTabs.Tab>
          ))}
        </CapsuleTabs>
      </div>
      <div>
        {list
          .filter((item) => {
            // 首先检查是否收藏
            if (!item.collect) return false;
            // 然后检查类型过滤
            if (activeKey === "all") return true;
            return item.type === activeKey;
          })
          .map((item) => (
            <div key={item._id} className="service-item">
              <div>
                <img src={item.img} alt="" className="zx-imgqx" />
              </div>
              <div>
                <p className="zx-qxperson">{item.name}</p>
                <p className="zx-qxtitle">{item.con}</p>
                <p className="zx-qxprice">￥{item.price}</p>
                <p className="zx-qxping">
                  <StarOutline style={{ color: "orange" }} />
                  {item.rate}&nbsp;&nbsp;|&nbsp;&nbsp;{item.ping}评价
                </p>
              </div>
              <div className="zx-qxcollect">
                <img
                  className="zx_top_img"
                  src="../../czs_imgs/收藏选中.png"
                  alt=""
                />
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}

export default Collect;
